Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



TEMPLATE 3 COLUMN DENGAN 2 COLUMN SIDEBAR
June 21, 2009
Posted by: Fauzie


Dalam rencana ini kita akan mempelajari bagaimana membuat modifikasi/perubahan ke atas kod CSS untuk mendapatkan template yang mempunyai 3 column-- 1 column bahagian utama (main content) dan 2 column di bahagian sidebar.

Seperti biasa kita akan menggunakan blogger minima template sebagai "blog test" Sila sign up dan create satu 'blog test" dengan memilih minima template sebagai asas template ujian kita.

Klik layout->Edit HTML->Klik Expand Widget Templates. Skrol ke bawah dan cari kod CSS #header-wrapper; (nota: cara paling cepat dengan tekan butang Ctrl+F serentak dan taipkan kod ini di dalam satu kotak kecil yang "pop-up" di bahagian bawah screen). Sila "delete" atau buang kod width=660px;. Ini adalah bertujuan bagi membolehkan header akan "span" lebarnya mengikut lebar yang akan kita tetapkan.

Selepas kod "width" ini dibuang, skrol ke bawah dan cari pula kod #header .description; dan #footer;. Delete atau buang kod max-width: 700px; yang terdapat di bawah #header . description; dan delete kod width: 660px; yang terdapat di bawah #footer. Untuk lebih jelas sila rujuk screenshoot di bawah ini.



Langkah seterusnya ialah skrol dan cari kod CSS #outer-wrapper { dan tukarkan width: 660px; kepada width: 960px;


Di bawah kod ini terdapat kod CSS #main-wrapper { dan diikuti dengan kod width: 410px;. Sila tukar width: 410px; kepada width: 530px; dan juga tukar kod float: $startSide; kepada float: left;

Sekarang mari kita tukarkan kod CSS di bahagian sidebar. Skrol atau cari kod CSS #sidebar-wrapper {. Apabila anda telah menemuinya, sila tukar kod ini dari #sidebar-wrapper { kepada #column_wrapper {. Lebarnya pula ditukar dari width: 220px; kepada width: 410px; dan kod float: $endSide; ditukar kepada float: right;. Sila lihat screenshoot di bawah.

Ini adalah kod asal


Ini adalah rupa kod di atas yang telah diubah



Sidebar kita akan mempunyai 2 column di bahagian kanan template dan juga mempunyai "seksyen atas" atau "top section". Untuk mendapatkan bentuk ini sila copy & paste atau taip kod-kod di bawah ini di bahagian bawah #column_wrapper {.

#sidebar-top {
clear: both;
}
#sidebar-right {
width: 200px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-left {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


Di bawah ini ialah screenshoot menunjukkan kedudukan kod-kod di atas yang telah ditaip.




Setelah kod-kod di atas ditaip, langkah berikutnya ialah menukar "id". Skrol dan cari kod ini:

<div id='sidebar-wrapper'>.
Sila tukar kod ini kepad:
<div id='column_wrapper'>

Di bawahnya anda akan mendapati kod-kod seperti berikut:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Perhatikan kod id='sidebar' ini. Sila taip atau tambah perkataan supaya ia menjadi sebagai id='sidebar-right'

Sekarang kita akan membina "top section" pula, iaitu satu column yang akan berada di atas 2 column sidebar ini.

Di bawah ini adalah kod-kod untuk tujuan ini.

<b:section class='sidebar' id='sidebar-top'/>
<b:section class='sidebar' id='sidebar-left'/>

Sila copy & paste atau taip kod-kod di atas di bahagian bawah <div id='column_wrapper'> (kod yang baharu kita ubah di atas).

Kod-kod ini akan kelihatan seperti berikut:

<div id='column_wrapper'>
< b:section class='sidebar' id='sidebar-top'/>
< b:section class='sidebar' id='sidebar-left'/>
< b:section class='sidebar' id='sidebar-right' preferred='yes'>

Langkah terakhir ialah membuat modification ke atas kod #footer. Skrol dan cari #footer dan juga ]]></b:skin></head>

Taipkan kod-kod seperti di bawah ini di bahagian atas ]]></b:skin></head>

body#layout #outer-wrapper {
width: 750px;
}
body#layout #main-wrapper {
width: 310px;
}

Kod-kod ini akan kelihatan seperti berikut:

body#layout #outer-wrapper {
width: 750px;
}
body#layout #main-wrapper {
width: 310px;
}
]]></b:skin>
</head>

Apabila telah selesai, klik "Preview" untuk memastikan semua kod "properly parsed" dan tiada masaalah. Jika ok, klik "Save Template" dan klik Layout untuk melihat layout template yang baru anda buat buat ini. Layoutnya akan kelihatan seperti contoh berikut: